<template>
  <div class="warp">
    <a-spin :spinning="spinning">
      <div class="pSlide-title" @click="onTitle">
        <div class="title">
          {{ title }}
        </div>
        <a-tooltip placement="right">
          <template slot="title">
            <span>新增{{ title }}</span>
          </template>
          <a-icon style="font-weight: 500" type="plus" @click.stop="newGroup" />
        </a-tooltip>
      </div>
      <a-menu v-model="menuKey" style="width: 100%">
        <a-menu-item v-for="(item, index) in data" :key="index" @click="getApprovalList(item)">
          <div class="menu_item">
            <div v-if="item.name.length < 12">{{ item.name }}</div>
            <a-tooltip v-else placement="left">
              <template slot="title">
                <span style="display: inline-block; width: 150px">{{ item.name }}</span>
              </template>
              <span class="astrict">
                {{ item.name }}
              </span>
            </a-tooltip>
            <div style="width: 40px">
              <a-icon type="delete" style="cursor: pointer; margin: 0 5px" @click.stop="delTmp(item)" />

              <a-tooltip v-if="edit" placement="right">
                <template slot="title">
                  <span>修改【{{ item.name }}】</span>
                </template>
                <a-icon type="edit" style="cursor: pointer" @click.stop="modification(item)" />
              </a-tooltip>
            </div>
          </div>
        </a-menu-item>
      </a-menu>
    </a-spin>
  </div>
</template>
<script>
export default {
  props: {
    remove: {
      type: Boolean,
      default: () => {
        return true;
      }
    },
    edit: {
      type: Boolean,
      default: () => {
        return true;
      }
    },
    title: {
      type: String,
      default: () => "产品"
    },
    data: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      menuKey: [0],
      spinning: true
    };
  },
  watch: {
    data(newData) {
      this.menuKey = [0];
    }
  },
  created() {
    setTimeout(() => {
      this.spinning = false;
    }, 800);
  },
  methods: {
    delTmp(data) {
      this.$emit("delTmp", JSON.parse(JSON.stringify(data)));
    },
    newGroup(data) {
      this.$emit("addition", JSON.parse(JSON.stringify(data)));
    },
    modification(data) {
      this.$emit("modification", JSON.parse(JSON.stringify(data)));
    },
    clone(data) {
      this.$emit("clone", JSON.parse(JSON.stringify(data)));
    },
    confirmtemp(data) {
      this.$emit("remove", JSON.parse(JSON.stringify(data)));
    },
    onTitle() {
      this.$emit("menuAll");
    },
    getApprovalList(data) {
      this.$emit("change", JSON.parse(JSON.stringify(data)));
    }
  }
};
</script>

<style lang="scss" scoped>
.warp {
  height: 100%;
  border-right: 1px solid #e8e8e8;
  .ant-menu-inline,
  .ant-menu-vertical,
  .ant-menu-vertical-left {
    border-right: none;
  }
  .pSlide-title {
    display: flex;
    background: #ffffff;
    padding: 0 16px;
    color: var(--primary);
    font-size: 14px;
    justify-content: space-evenly;
    align-items: center;
    .title {
      width: 100%;
    }
  }
  .ant-menu-item {
    margin-bottom: 0px !important;
    border-bottom: 1px solid #e8e8e8 !important;
  }
  .menu_item {
    display: flex;
    justify-content: space-between;
    .astrict {
      display: inline-block;
      width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
    }
  }
}
</style>
